import { usePageEvent } from "@remax/framework-shared";
import { Button, Icon } from "annar";
import * as React from "react";
import { useNativeEffect } from "remax";
import { View } from "remax/wechat";

type Props = {
  commentNumber: number;
  onTap?: (e: any) => void | undefined;
  style?: React.CSSProperties | undefined;
};

export default (props: Props) => {
  const [commentNumber, setCommentNumber] = React.useState(props.commentNumber);

  React.useEffect(() => {
    setCommentNumber(props.commentNumber);
    // console.log("React render");
  }, [props.commentNumber]);

  useNativeEffect(() => {
    setCommentNumber(props.commentNumber);
    // console.log("wechat render");
  }, [props.commentNumber]);

  return (
    <View
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <Button
        style={props.style}
        type="default"
        shape="circle"
        icon={<Icon type="comment" size="75px" color="#fff" />}
        ghost
        onTap={props.onTap}
      />
      <View style={{ color: "#fff", margin: "10px auto" }}>
        {commentNumber}
      </View>
    </View>
  );
};
